
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <link rel="stylesheet" href="../static/css/all.main.css">
    <link rel="stylesheet" href="../static/css/style.css">
</head>
<body>
<div class="main" id="main">
    <div class="form-container sign-up-container">
        <form action="/register" method="post">
            <h1>注 册</h1>
            <input type="text" name="username" placeholder="账号">
            <input type="text" name="name" placeholder="姓名">
            <input type="password" name="password" placeholder="密 码">
            <input type="password" name="enPassword" placeholder="确 定 密 码">

            <select name="role" lay-verify="required" style="size: 100px 50px">
                <option value="0">学生</option>
                <option value="1">教师</option>
                <option value="2">管理员</option>
            </select>

            <button>注 册</button>
        </form>
    </div>
    <div class="form-container sign-in-container">
        <form action="/login" method="post">
            <h1>登 录</h1>
            <input type="username" name="username" placeholder="账号">
            <input type="password" name="password" placeholder="密 码">

            <select name="role" lay-verify="required">
                        <option value="0">学生</option>
                        <option value="1">教师</option>
                        <option value="2">管理员</option>
            </select>


            <a href="javascript:;">忘记密码？</a>
            <button>登 录</button>
        </form>
    </div>
    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <h1>已有帐号？</h1>
                <p>请使用您的帐号进行登录</p>
                <button class="switcher" id="btnLogin">登 录</button>
            </div>
            <div class="overlay-panel overlay-right">
                <h1>没有帐号？</h1>
                <p>立即注册加入我们，和我们一起开始旅程吧</p>
                <button class="switcher" id="btnRegister">注 册</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    const container = document.getElementById('main');
    const btnRegister = document.getElementById('btnRegister');
    const btnLogin = document.getElementById('btnLogin');


    btnRegister.addEventListener('click', function () {
        container.classList.add('right-panel-active')
    })

    btnLogin.addEventListener('click', function () {
        container.classList.remove('right-panel-active')
    })

</script>

</html>
